import React, { Component } from 'react';
import ReactDOM from "react-dom";
import {
	observer,
} from 'mobx-react';
import {
	withRouter,
} from 'react-router-dom';
import { Avatar,Flex,Tools } from 'weaver-mobile';
import {BrowserHrm, ListViewPage} from 'weaver-mobile-page';
import AddBtn from "./AddBtn.js";
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Member extends Component {
	componentDidMount() {
	    this.props.store.getMemberList();
	 }

	 getTemplate = () => {
	 	const template = {
		  default: [
		  	{
		      key: 'col0',
		      render:(data) => {
		      	const {userid,lastname,subcompanyid1span,jobtitlename,departmentidspan} = data;
		      	
				const breakAll = {
					"word-break": "break-all"
				}
		      	return (
		      		<Flex>
		      			<Flex.Item>
		      				<Avatar userId={userid} />
		      			</Flex.Item>
		      			<Flex.Item style={{flex:5}}>
			      			<Flex>
				                <Flex.Item style={breakAll}>{lastname}</Flex.Item>
				                <Flex.Item style={{ flex: 2,...breakAll }}>{jobtitlename}</Flex.Item>
				              </Flex>
				              <Flex style={{color:"#AAAAAA"}}>
				                <Flex.Item style={breakAll}>{subcompanyid1span}</Flex.Item>
				                <Flex.Item style={{ flex: 2,...breakAll }}>{departmentidspan}</Flex.Item>
				              </Flex>
		      			</Flex.Item>
		      		</Flex>
		      	)
		      }
		    },
		  ],
		};

		return template
	 }

	render() {
		const {
			store,
		} = this.props, {
			deleteMember,
			browserHrmStore,
			browserHrmValue,
			setBrowserHrmValue,
			openMultiHrmBrowser,
			memberListAd,
		} = store;

		return (
			<React.Fragment>
				<AddBtn name={getLabel(125217,"添加成员")} onClick={openMultiHrmBrowser} />
				<ListViewPage.Normal
					getTemplate={this.getTemplate}
		          	store={memberListAd}
		          	showDelete
		          	onDelete={deleteMember}
		        />
			</React.Fragment>
		);
	}
}